<!DOCTYPE html>
<svg width="200" height="200">
  <linearGradient id="g" x2="0" y1="0.1" y2="0.9">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  <pattern id="p" x="0.1" y="0.1" width="0.2" height="0.2" viewBox="0 0 10 10">
    <rect width="5" height="5"/>
    <rect x="5" y="5" width="5" height="5"/>
  </pattern>
  <rect x="20" y="20" width="50" height="50" fill="url(#g)"/>
  <rect x="95" y="20" width="50" height="50" fill="url(#p)"/>
</svg>
